import { ref } from 'vue'; 
import { useToolBar as ToolBarList } from "@/store";
import type * as Type from '@/store/modules/toolBar/type';

export default function useToolBar(provideState: { getToolBarItem: Function }) {

  const toolBarList = ToolBarList();
  
  // 工具展示状态
  const visibile = ref(true);

  // 工具标题点击
  const handleTitleClick = (flag: boolean) => {
    visibile.value = !flag;
  };

  // 工具列表点击
  const handleListClick = (item: Type.QueryDataList, ctWlww: string = '') => {
    if (item.label === '透明度') {
      item.isVisible = !item.isVisible;
    } else {
      if (item.label === '四角信息') {
        item.isFour = !item.isFour;
      }
      provideState.getToolBarItem(() => {
        return {
          currentItem: toolBarList.setCurrentId(item.id),
          isFour: item.isFour,
          ctWlww
        }
      });
    };
  };

  // 透明度滑块操作
  const handleSliderChange = (item: Type.QueryDataList, type: string = '', value: number | [number, number]) => {
    provideState.getToolBarItem(() => {
      return {
        currentItem: toolBarList.setCurrentId(item.id),
        toolType: type,
        value
      };
    });
  }

  return {
    visibile,
    handleTitleClick,
    handleListClick,
    handleSliderChange
  }
}